<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useIndexStore } from '../../pinia'
import { ElMessage } from "element-plus"
import { request } from '@/utils/axios/request.js'
import local from '@/components/local.vue'

let locabob = ref(false)
// 小眼睛
let showPassword = ref(false)
//确认密码弹窗
let dialogFormVisible = ref(false)
let form = reactive({
    password1: '',
    password2: '',
})
let ok = ref("添加")
//权限显示隐藏
let state = useIndexStore()
let tableData = ref([])
let Menutitle = reactive(['部门', '部门人数', '部门状态', '创建时间', '操作'])
//新增中数字类型框
let input = reactive({
    "nickname": "",
    "departmentnum": "",
    "departmentlist": "",
    "people": "",
    "destatues": "",
    "createdTime": "",
    "iconshow": ""
})
let option2 = reactive([
    {
        value2: '正常',
        labe2: '正常',
    },
    {
        value2: '停用',
        labe2: '停用',
    },
])
//控制弹窗显示隐藏
let caiDanS = ref(false)

//获取数据
onMounted(async () => {
    try {
        locabob.value = true
        let resData = await request({
            url: '/admin/department/departmentall',
            method: 'get',
        })
        resData.data.forEach((item, index) => {
            item.departmentlist = item.departmentlist.split(/,|，/)
            item.people = item.people.split(/,|，/)
            item.departmentnum = item.people.reduce((sum, sum1) => Number(sum) + Number(sum1));
        })
        tableData.value = resData.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
})

//封装请求数据
let SearchAll = async () => {
    try {
        locabob.value = true
        let resData = await request({
            url: '/admin/department/departmentall',
            method: 'get',
        })
        resData.data.forEach((item, index) => {
            if (item.departmentlist[0] == "" || item.departmentlist[0] == '') {
                item.departmentlist = ''
                return
            }

            item.departmentlist = item.departmentlist.split(/,|，/)
            item.people = item.people.split(/,|，/)
            item.departmentnum = item.people.reduce((sum, sum1) => Number(sum) + Number(sum1));
        })
        tableData.value = resData.data.sort((a, b) => b.id - a.id)
    } catch (err) {
        console.log(err);
    }
    locabob.value = false
}
//关闭新增
let delCai = () => {
    input = reactive({
        "nickname": "",
        "departmentnum": "",
        "departmentlist": "",
        "people": "",
        "destatues": "",
        "createdTime": "",
        "iconshow": ""
    })
    caiDanS.value = false
    ok.value == "添加"
}


//删除岗位
let itemid = ref('')
let delindexz = ref(-1)
let del = (id, indexz) => {
    itemid.value = id
    delindexz.value = indexz
    dialogFormVisible.value = true
}
//确认删除
let newdepartmentlist = ref('')
let newpeople = ref('')
//修改
let newid = ref('')
let update = (data, index) => {
    let xtime = new Date().toLocaleString().split(" ")
    input.createdTime = xtime[0]
    newid.value = data.id
    caiDanS.value = true
    ok.value = "修改"
    input.departmentlist = data.departmentlist
    input.nickname = data.nickname
    input.departmentnum = data.departmentnum
    input.destatues = data.destatues
    input.people = data.people
}
//确认新增岗位
let okbtn = async () => {
    if (ok.value == "添加") {
        let newinput = JSON.parse(JSON.stringify(input))
        if (newinput.nickname == '' || newinput.departmentlist == '' || newinput.people == '' || newinput.destatues == '') {
            ElMessage.error('信息不能为空')
            return;
        }
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/department/departmentadd',
                method: 'post',
                data: newinput
            })
            ElMessage.success(data.message)
        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    } else if (ok.value == "修改") {
        try {
            locabob.value = true
            let data = await request({
                url: '/admin/department/departmentadd1',
                method: 'put',
                data: {
                    departmentnum: input.departmentnum,
                    destatues: input.destatues,
                    createdTime: input.createdTime,
                    nickname: input.nickname,
                    people: input.people.toString(),
                    departmentlist: input.departmentlist.toString(),
                    id: newid.value
                }
            })
            let obj = JSON.parse(JSON.stringify(input))
            if (obj.destatues == '' || obj.people == '' || obj.departmentlist == '' || obj.nickname == "") {
                alert('不能为空')
                return;
            }
            SearchAll()
            ElMessage.success(data.message)

        } catch (err) {
            console.log(err);
        }
        locabob.value = false
    }
    SearchAll()
    delCai();
}
//开启新增
let add = () => {
    ok.value = "添加"
    caiDanS.value = true
    let time = new Date().toLocaleString().split(" ")
    let newtime = time[0]
    input.createdTime = newtime
}
//展开
let expand = (id) => {
    tableData.value.forEach((item, index) => {
        if (item.id == id) {
            item.iconshow = true
        }
    })

}
//收缩
let putaway = (id) => {
    tableData.value.forEach((item, index) => {
        if (item.id == id) {
            item.iconshow = false
        }
    })
}

//删除整个
let lastid = ref('')
let dele = (id) => {
    lastid.value = id
    dialogFormVisible.value = true
}

//确认密码删除
let passave = async () => {
    let userItems = ref('')
    let usernameLoca = localStorage.getItem('username')
    if (usernameLoca) {
        try {
            let newdata = await request({
                url: `/admin/user/users1?username=${usernameLoca}`,
                method: 'get'
            })
            userItems.value = newdata.data[0]
        } catch (err) {
            console.log(err);
        }
    }
    if (form.password1 != userItems.value.password) {
        ElMessage.error('原始密码错误')
        form.password1 = ''
        form.password2 = ''
        return;
    } else if (form.password2 != userItems.value.password) {
        ElMessage.error('确认密码错误')
        form.password2 = ''
        return;
    } else if (form.password2 == userItems.value.password && userItems.value.password == form.password1) {
        if (delindexz.value != -1 || delindexz.value == 0) {
            tableData.value.forEach((item, index) => {
                if (item.id == itemid.value) {
                    item.departmentlist.splice(delindexz.value, 1)
                    item.people.splice(delindexz.value, 1)
                    newdepartmentlist.value = item.departmentlist
                    newpeople.value = item.people
                }
            })
            try {
                locabob.value = true
                let data = await request({
                    url: '/admin/department/departmentadd2',
                    method: 'put',
                    data: {
                        people: newpeople.value.toString(),
                        departmentlist: newdepartmentlist.value.toString(),
                        id: itemid.value
                    }
                })
                dialogFormVisible.value = false
                form = reactive({
                    password1: '',
                    password2: '',
                })
                ElMessage.success(data.message)
            } catch (err) {
                console.log(err);
            }
            locabob.value = false
            delindexz.value = -1
        } else {
            try {
                locabob.value = true
                let data = await request({
                    url: '/admin/department/departmentdel',
                    method: 'delete',
                    data: { id: lastid.value }
                })
                tableData.value.forEach((item, index) => {
                    if (item.id == lastid.value) {
                        tableData.value.splice(index, 1)
                    }
                })
                dialogFormVisible.value = false
                form = reactive({
                    password1: '',
                    password2: '',
                })
                ElMessage.success(data.message)
            } catch (err) {
                console.log(err);
            }
            locabob.value = false
        }
    }
}





</script>
<template>
    <div class="box_boxz">
        <local v-show="locabob" />
        <div class="SystemLog">
            <ul style="display: flex;">
                <li><el-button @click="add" type="primary">添加</el-button></li>
            </ul>
        </div>
        <div class="type_ul">
            <ul class="Menutitle_ul">
                <li v-for='(item, index) in Menutitle' :key="item">{{ item }}</li>
            </ul>
            <ul class="Menulist_ul">
                <li v-for="(item, index) in tableData" :key="item.id">
                    <div class="inside_p">
                        <p>
                            <span class="iconfont icon-jiahaozhankai" v-show="!item.iconshow"
                                @click="expand(item.id)"></span>
                            <span class="iconfont icon-jianhaoshouqi" v-show="item.iconshow"
                                @click="putaway(item.id)"></span>
                            <span>{{ item.nickname }}</span>
                        </p>
                        <p>{{ item.departmentnum }}</p>
                        <p>{{ item.destatues }}</p>
                        <p>{{ item.createdTime }}</p>
                        <p>
                            <el-button link type="primary" size="small" @click="update(item, index)"
                                v-show="state.role == 0">修改</el-button>
                            <el-button link type="primary" size="small" @click.prevent="dele(item.id)"
                                v-show="state.role == 0">
                                删除
                            </el-button>
                        </p>
                    </div>
                    <div class="inside_ul" :style="{ height: item.iconshow ? '100%' : '0' }">
                        <div v-for="(itemz, indexz) in item.departmentlist" v-show="item.departmentlist[0] != ''"
                            :key="indexz">
                            <p>
                                <span>{{ itemz }}</span>
                            </p>
                            <p>{{ item.people[indexz] }}</p>
                            <p>{{ item.destatues }}</p>
                            <p>{{ item.createdTime }}</p>
                            <p>
                                <el-button link type="primary" size="small" @click.prevent="del(item.id, indexz)"
                                    v-show="state.role == 0">
                                    删除
                                </el-button>
                            </p>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <div class="sheZhi" :style="{ width: caiDanS ? '460px' : '0' }">
            <dl>
                <dt>
                <dd>{{ ok }}</dd>
                <dd @click="delCai"><span class="iconfont icon-shanchu2"></span></dd>
                </dt>
            </dl>
            <ul>
                <li>
                    <span>{{ ok == "添加" ? '创建时间' : '修改时间' }}:&nbsp;</span>
                    <el-input v-model="input.createdTime" clearable disabled />
                </li>
                <li>
                    <span>部门:&nbsp;</span>
                    <el-input v-model="input.nickname" placeholder="请输入部门" clearable />
                </li>
                <!-- <li>
                    <span>部门人数:&nbsp;</span>
                    <el-input v-model="input.departmentnum" type="number" placeholder="请输入部门人数" clearable />
                </li> -->
                <li>
                    <span>岗位:&nbsp;</span>
                    <el-input v-model="input.departmentlist" type="textarea" placeholder="请输入部门岗位    格式为 XXX，XXX，XXX"
                        clearable />
                </li>
                <li>
                    <span>岗位人数:&nbsp;</span>
                    <el-input v-model="input.people" placeholder="请输入岗位人数    格式为 X，X，X" clearable />
                </li>
                <li>
                    <span>部门状态:&nbsp;</span>
                    <el-select v-model="input.destatues" placeholder="请输入部门状态" clearable>
                        <el-option v-for="item in option2" :key="item.value2" :label="item.labe2" :value="item.value2">
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <el-button type="primary" @click="okbtn">保存</el-button>
                    <el-button @click="delCai">取消</el-button>
                </li>
            </ul>
        </div>
        <div class="mengBan" v-show="caiDanS" @click="delCai"></div>
        <div class="popbox">
            <el-dialog v-model="dialogFormVisible" title="确认密码">
                <el-form :model="form">
                    <el-form-item label="原始密码" label-width="140px">
                        <el-input v-model="form.password1" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="140px">
                        <el-input v-model="form.password2" type="password" autocomplete="off" :show-password="true" />
                        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword = !showPassword"></i>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="passave">
                            确认删除
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<style scoped lang="less">
.box_boxz {
    display: flex;
    flex-direction: column;
    height: calc(100% - 85px);
}

.type_ul {
    display: flex;
    flex-direction: column;
}

.Menutitle_ul {
    background-color: #fafafa;
    display: flex;
    flex-shrink: 0;
    height: 40px;
    line-height: 40px;
    justify-content: space-around;
    border-bottom: 0.5px solid #cecece;
    // padding: 20px 0 0;
    font-weight: 600;
    color: #817e7e;

    li {
        font-size: 14px;

        &:nth-child(5) {
            margin-right: 1%;
        }
    }
}

.Menulist_ul {
    font-size: 14px;

    li {
        // height: 55px;
        display: flex;
        flex-direction: column;
        line-height: 55px;
        border-bottom: 1px solid #eee7e7;
        // position: relative;

        .inside_p {
            display: flex;
            justify-content: space-around;
            margin-left: 3%;

            p {
                width: 10%;
            }

            p:nth-child(2),
            p:nth-child(3),
            p:nth-child(4),
            p:nth-child(5),
            p:nth-child(6) {
                text-align: center;
            }

            p:nth-child(2) {
                margin-left: -4%;
            }
        }

    }
}

.inside_ul {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 0;

    div {
        display: flex;
        height: 55px;
        line-height: 55px;
        border-bottom: 1px solid #eee7e7;
        justify-content: space-around;

        p {
            width: 15%;
        }

        p:nth-child(1) {
            margin-left: 8%;
        }

        p:nth-child(2),
        p:nth-child(3),
        p:nth-child(4),
        p:nth-child(5),
        p:nth-child(6) {
            text-align: center;
        }

        p:nth-child(2) {
            margin-left: -8%;
        }
    }
}

// 设置
.sheZhi {
    width: 0px;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    z-index: 1001;
    box-shadow: -1px 0 10px rgb(143, 143, 143);
    transition: all 0.3s ease-in-out;

    dl {
        display: flex;
        flex-direction: column;

        dt:nth-child(1) {
            width: 100%;
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            border-bottom: 0.5px solid rgba(216, 214, 214, 0.5);
            margin-bottom: 45px;


            dd:nth-child(1) {
                font-size: 20px;
            }

            dd:nth-child(2) {
                margin-right: 60px;

            }
        }

    }

    ul {
        display: flex;
        flex-direction: column;
        padding: 0 30px;

        .demo-pagination-block {
            padding-bottom: 40px;
            overflow: hidden;
            align-self: center;
        }

        li {
            margin-bottom: 20px;
            display: flex;

            // justify-content: space-between;
            span {
                flex-shrink: 0;
                margin-right: 20px;
                font-weight: 600;
                font-size: 14px;
            }
        }
    }
}

// 蒙版
.mengBan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(247, 247, 247, 0.3);
    filter: brightness(1%);
}

.SystemLog {
    margin-top: 10px;
    display: flex;
    flex-shrink: 0;
    height: 50px;
    line-height: 50px;
    background-color: #f9f9f9;

    p {
        font-size: 14px;
        font-weight: 700;
    }

    ul {
        margin-left: 15px;

        li {
            margin-left: 10px;
        }
    }
}

.popbox {

    :deep .el-input {
        width: 300px;
    }

    .dialog-footer button:first-child {
        margin-right: 10px;
    }

    :deep .el-form {
        margin-left: 50px;
    }
}
</style>